<!--
 * @Author: ChunLai
 * @Date: 2020-12-16 08:55:45
 * @LastEditTime: 2025-08-14 10:45:49
 * @Description: 表格展示已选险种信息
 * @FilePath: \02.bldinsure\src\components\RiskTable.vue
-->
<template>
  <div class="risk-table">
    <div class="t_head">
      <span class="t_head_cell tw30">险种名称</span>
      <span class="t_head_cell tw19">缴费<br />期间</span>
      <span class="t_head_cell tw15">保险<br />期间</span>
      <span class="t_head_cell tw18">基本<br />保额</span>
      <span class="t_head_cell tw18">首年<br />保费</span>
    </div>
    <div
      class="t_body"
      v-for="(item, index) in riskInfo"
      :key="`risk_sub${index}`"
    >
      <div class="t_body_tr">
        <span
          class="t_body_td tw30 risk-name"
          :class="item.ismain ? 'main' : 'sub'"
        >
          {{ item.productName }}
        </span>
        <span class="t_body_td tw19">
          {{ item.payendyear | valFormat(item, "payendyear", compEngName) }}
        </span>
        <span class="t_body_td tw15">
          {{ item.insuYear | valFormat(item, "insuYear", compEngName) }}
        </span>
        <span class="t_body_td tw18">
          {{ item.amnt | valFormat(item, "amnt", compEngName) }}
        </span>
        <span class="t_body_td tw18"> {{ item.prem }}元 </span>
      </div>
      <!-- 责任显示/liabilityList类 >>> isChecked -->
      <div class="t_body_tr2 duty_tr" v-if="item.liabilityList">
        <template v-for="(duty, dtyIx) in item.liabilityList">
          <div
            class="multi_dutys"
            :class="dtyIx != 0 ? 'mt6' : ''"
            :key="duty.varietyCode"
            v-if="duty.isChecked"
          >
            <div class="duty_name">* {{ duty.label }}：</div>
            <div class="amnt_prem_val">
              <span v-if="duty.amnt">
                保额：<b>{{ duty.amnt }}</b> 元；</span
              >
              <span v-if="duty.prem">
                保费：<b>{{ duty.prem }}</b> 元
              </span>
            </div>
          </div>
        </template>
      </div>
      <div class="t_body_tr duty_tr" v-if="item.planCode && item.plansArr">
        投保计划：{{ getItemLabel(item.planCode, item.plansArr) }}
      </div>
      <div class="t_body_tr duty_tr" v-if="item.programmeName">
        投保计划：{{ item.programmeName }}
      </div>
      <div class="t2_body_tr duty_tr" v-if="compEngName == 'ansheng'">
        <div class="dutys-box" v-if="getPlanName(item.planCode)">
          <span class="dutys-box-label">投保计划：</span>
          <span class="dutys-box-value">{{ getPlanName(item.planCode) }}</span>
        </div>
        <div class="dutys-box" v-if="getZympeName">
          <span class="dutys-box-label">住院免赔额：</span>
          <span class="dutys-box-value">{{ getZympeName }}</span>
        </div>
        <div class="dutys-box" v-if="getFjbzName">
          <span class="dutys-box-label">附加保障：</span>
          <span class="dutys-box-value" v-html="getFjbzName"></span>
        </div>
      </div>
      <div class="t_body_tr duty_tr" v-if="item.pullAge">
        养老年金开始领取年龄：{{ getItemLabel(item.pullAge, item.pullAgeArr) }}
      </div>
      <div class="t_body_tr duty_tr" v-if="item.pullMethod">
        养老年金领取频次：
        {{ getItemLabel(item.pullMethod, item.pullMethodArr) }}
      </div>
      <div
        class="t_body_tr duty_tr"
        v-if="item.dutyList && item.dutyList.length > 0"
      >
        责任选择： {{ getZeRenName(item) }}
      </div>
      <div
        class="t_body_tr duty_tr"
        v-if="item.dutyAmntPremTable && item.dutyAmntPremTable.length > 0"
      >
        <AmntPremTable :tables="item.dutyAmntPremTable" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AmntPremTable from "@/components/tables/AmntPremTable";
export default {
  name: "RiskTable",
  components: { AmntPremTable },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      riskInfo: "risks/showedRisks",
      mainInsu: "risks/mainInsu",
      totalFee: "insert/totalPrem",
      apiBbrMult: "insert/apiBbrMult",
    }),
    getItemLabel() {
      return function (val, trgArr) {
        let res = [];
        const obj = trgArr.find((ele) => ele.value === val);
        if (obj) {
          res.push(`${obj.label}${obj.content ? `（${obj.content}）` : ""}`);
        }
        const teshu2 = trgArr.find((p) => p.mustChoose === "1");
        if (teshu2) {
          if (teshu2?.mandatoryConditionsKey == "bbrMaxNum") {
            if (this.apiBbrMult.length >= teshu2.mandatoryConditionsValue) {
              res.push(`${teshu2.label}`);
            }
          }
        }
        return res.join("+");
      };
    },
    getZeRenName() {
      return function (item) {
        let res = "";
        let dutyValue = "";
        if (item.dutyList && item.dutyList.length > 0) {
          let codes = [];
          codes = item.dutyList.filter((i) => i.isCheck).map((j) => j.value);
          dutyValue = `${item.baseDutyCode || "1"}${codes.join("")}`;
          // console.log(dval);
          if (item.planNameTrans && item.planNameTrans[dutyValue]) {
            res = item.planNameTrans[dutyValue];
          } else {
            // 未配置planNameTrans
            let labels = [];
            labels = item.dutyList.filter((i) => i.isCheck).map((j) => j.label);
            res = "基本责任";
            if (labels.length > 0) {
              res += `+${labels.join("+")}`;
            }
          }
        }
        if (item.duty3List && item.duty3List.length > 0) {
          res += this.getDty3Label(item.duty3List);
        }
        return res;
      };
    },
    choosedKeys() {
      let res = {};
      if (this.mainInsu[0]?.apiKeyFields) {
        const obj = JSON.parse(JSON.stringify(this.mainInsu[0].apiKeyFields));
        Object.keys(obj).map((k) => {
          if (obj[k] && obj[k] != "no") {
            res[k] = obj[k];
          }
        });
      }
      return res;
    },
    getZympeName() {
      let res = "";
      const zympeList = this.mainInsu[0]?.zympeList || [];
      if (zympeList.length > 0) {
        const fd2obj = zympeList.find((z) => z.value == this.choosedKeys.zympe);
        if (fd2obj && fd2obj.label) {
          res = fd2obj.label;
        }
      }
      return res;
    },
    getFjbzName() {
      if (!this.mainInsu[0].isNewUiConfig) {
        let res = this.getFjbz2Name();
        return res;
      }
      let res = [];
      // zdjbDuty
      if (this.choosedKeys.zdjb) {
        res.push("重大疾病保险金");
      }
      // mjz
      if (this.choosedKeys.mjz) {
        res.push("门急诊医疗保险金");
      }
      if (this.choosedKeys.ywtdyp) {
        res.push(
          "院外特定药品费用医疗保险金",
          "海南博鳌乐城特定药品费用医疗保险金"
        );
      }
      if (this.choosedKeys.tdylqx) {
        res.push("特定医疗器械费用医疗保险金");
      }
      // exzltxDuty 相关逻辑
      if (this.choosedKeys.exzl) {
        res.push("恶性肿瘤院外特定药品费用医疗保险金");
      }
      if (res.length > 0) {
        return res.join("<br>");
      }
      return "";
    },
  },
  filters: {
    valFormat: function (val, itemObj, type, compName) {
      if (type === "insuYear") {
        if (itemObj.insuYearType === "A") {
          if (val === "106") {
            return compName === "guofu" && !itemObj.ismain
              ? "与主险合同一致"
              : "终身";
          } else {
            return "保至" + val + "岁";
          }
        } else if (itemObj.insuYearType === "D") {
          return val.indexOf("天") !== -1 ? val : `${val}天`;
        } else {
          return val + "年";
        }
      }
      if (type === "amnt") {
        // 不显示保额
        if (itemObj.blankAmnt) {
          return "--";
        }
        // 利安后面不显示保额 (blankAmnt替换)
        // if (['lian'].includes(compName)) {
        //   if (itemObj.productName.indexOf('豁免') !== -1) {
        //     return '--';
        //   }
        // }
        const uv = itemObj.amntUnit !== void 0 ? itemObj.amntUnit : "元";
        if (val > 10000) {
          return val % 10000 === 0 ? `${val / 10000}万${uv}` : `${val}${uv}`;
        } else if (val) {
          return `${val}${uv}`;
        } else {
          return "--";
        }
      }
      if (type === "payendyear") {
        return val === "趸交" ? "趸交" : val + "年交";
      }
    },
  },
  methods: {
    getFjbz2Name() {
      let res = [];
      const apiCodes = this.mainInsu[0].apiCodes || {};
      if (Object.keys(apiCodes).length > 0) {
        this.mainInsu[0].dutys.forEach((e) => {
          const arr2 = e.value.split("-"),
            fdObj = apiCodes.find((a) => a == arr2[0]);
          if (fdObj) {
            res.push(e.label);
          }
        });
      }
      if (res.length > 0) {
        return res.join("<br>");
      }
      return "";
    },
    getDty3Label(duty3List) {
      let res = "";
      let chk2 = duty3List.filter((i) => i.isChecked);
      const len = chk2.length;
      if (len > 0) {
        for (let b = 0; b < len; b++) {
          const item = chk2[b];
          res += `+${item.label}`;
          if (item.isMust && item.options) {
            const obj3 = item.options.find((b) => b.value == item.value);
            if (obj3) {
              res += `【${obj3.label}】`;
            }
          }
        }
      }
      return res;
    },
    getPlanName(val) {
      let res = "";
      let temRisk = this.mainInsu[0],
        planArr = temRisk.plans || [],
        planLen = planArr.length;
      if (planLen > 0) {
        const resVal = planArr.find((item) => item.value === val) || {};
        res = resVal && resVal.label;
      }
      if (temRisk.isNewUiConfig) {
        const apiKeys = temRisk.apiKeyFields;
        const bplan = temRisk.insurePlanArr.find(
            (ele) => ele.value == apiKeys.planBigId
          ),
          splan = bplan.codeList.find((ele) => ele.value == apiKeys.planId);
        res = `${bplan.name} | ${splan.label}`;
      }
      // console.log('getPlanName',res)
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.tw30 {
  width: 30%;
}
.tw19 {
  width: 19%;
}
.tw15 {
  width: 15%;
}
.tw18 {
  width: 18%;
}

.risk-table {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ffe5c5;
  .t_head {
    display: flex;
    background-color: #fffaf3;
    border-bottom: 1px solid #ffe5c5;
    .t_head_cell {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666666;
      font-size: 12px;
      font-weight: 400;
      padding: 6px 0;
      line-height: 1.3;
      letter-spacing: 1px;
    }
  }
  .t_body {
    &:not(:last-child) {
      border-bottom: 1px solid #ffe5c5;
    }
    &:nth-child(odd) {
      background-color: #fffaf3;
    }
    .t_body_tr {
      display: flex;
    }
  }
}
.t2_body_tr {
  width: 100%;
}
.dutys-box {
  display: flex;
  &-label {
    width: 80px;
  }
  &-value {
    flex: 1;
  }
}
.duty_tr {
  font-size: 12px;
  color: #747474;
  padding: 0 10px;
  margin-bottom: 4px;
}
.amnt_prem_val {
  display: flex;
  align-items: center;
  margin-top: 2px;
}
.t_body_td {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  font-size: 12px;
  font-weight: 400;
  padding: 10px 8px;
  line-height: 1.3;
  word-break: break-all;
  &.risk-name {
    justify-content: flex-start;
    position: relative;
    padding-top: 13px;
    &.main {
      &::after {
        content: "主";
        position: absolute;
        top: 0;
        left: 0;
        width: 17px;
        height: 12px;
        line-height: 12px;
        text-align: center;
        font-size: 10px;
        color: #ffffff;
        border-radius: 0px 0px 2px 0px;
        background: #f54040;
      }
    }

    &.sub {
      &::after {
        content: "附";
        position: absolute;
        top: 0;
        left: 0;
        width: 17px;
        height: 12px;
        line-height: 12px;
        text-align: center;
        font-size: 10px;
        color: #ffffff;
        border-radius: 0px 0px 2px 0px;
        background: #ff8d1a;
      }
    }
  }
}

table {
  table-layout: fixed;
  empty-cells: show;
  border-collapse: collapse;
  margin: 0 auto;
}
.duty_table {
  width: 100%;
  border-collapse: collapse;

  thead {
    background-color: #ffffff;

    tr {
      th {
        color: #666666;
        font-weight: normal;
        padding: 6px 0;
        line-height: 1;
        text-align: center;
        border: 1px solid #e6e6e6;

        &.w40 {
          width: 40%;
        }
      }
    }
  }

  td {
    color: #666666;
    padding: 6px 0;
    text-align: center;
    border: 1px solid #e6e6e6;
  }
}

.total-fee {
  font-size: 18px;
  font-family: D-DIN-Bold;
  color: #d44438;
}

.top_line {
  border-top: 1px solid #ffe5c5;
}
</style>
